<template>
  <div class="cost-approval-dialog">
    <el-dialog
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      :append-to-body="true"
      :class="{'mobile-el-dialog': showMobilePage}"
      custom-class="del-message del-message-cancel el-message-box--center cost-approval-box"
      @open="openDialog"
    >
      <template>
        <div class="el-message-box__title">
          <span class="el-message-box__status del-icon">&nbsp;</span>
        </div>
        <div class="el-message-box__content">
          <p class="el-message-box__message">{{ msg }}</p>
        </div>
        <div class="dialog-footer" style="text-align:center">
          <div class="btn-wrap">
            <template v-if="type !== 0">
              <el-button
                :disabled="loading || rejectLoading"
                :loading="loading"
                type="primary"
                size="small"
                class="ok"
                @click="approval(HANDLE_ACTIVE.PASS_APPROVAL)"
              >
                {{ isBatch ? '批量' : '' }}通过
              </el-button>
              <el-button
                :disabled="loading || rejectLoading"
                :loading="rejectLoading"
                class="ok"
                type="danger"
                size="small"
                plain
                @click="approval(HANDLE_ACTIVE.REFUSE_APPROVAL)"
              >
                {{ isBatch ? '批量' : '' }}拒绝
              </el-button>
            </template>
            <template v-else>
              <el-button
                :disabled="loading"
                :loading="loading"
                type="primary"
                class="ok"
                size="small"
                @click="approval(HANDLE_ACTIVE.CANCEL_APPROVAL)"
              >
                确定
              </el-button>
            </template>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
// api
import { costApproval } from '@/api/costManage';
import { HANDLE_ACTIVE, SETTLEMENT_STATUS, APPROVAL_STATUS } from '@/utils/const/cost';
export default {
  props: {
    // 操作类型 -1:审批， 0:撤销
    type: {
      type: Number,
      default: -1
    },
    // 选中的成本id： id,id,id || id
    costIds: {
      type: String,
      default: ''
    },
    // 选中的成本项
    selectList: {
      type: Array,
      default: () => []
    },
    // 是否为批量
    isBatch: {
      type: Number,
      default: 0
    },
    // 列表选中参数
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      rejectLoading: false,
      dialogFormVisible: false,
      HANDLE_ACTIVE,
      msg: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    handleClose() {
      this.dialogFormVisible = false;
    },
    openDialog() {
      if (this.selectList.find(i => i.settlementStatus === SETTLEMENT_STATUS.SETTLEMENT || i.settlementStatus === SETTLEMENT_STATUS.COMPLETED)) {
        this.$message.warning('所选成本包含成本状态为“结算中/已完成的成本，请取消选择后再操作');
        return false;
      }
      this.dialogFormVisible = true;
      this.msg = this.type !== 0 ? '请选择审批意见' : `请确认是否${this.isBatch ? '批量' : ''}作废审批`;
    },
    approval(status, item = {}) {
      if (status === HANDLE_ACTIVE.CANCEL_APPROVAL && this.selectList.find(i => i.approvalStatus === APPROVAL_STATUS.PENDING)) {
        this.$message.warning('所选成本包含待审批成本，请取消选择后再操作');
        return false;
      }
      if (status === HANDLE_ACTIVE.PASS_APPROVAL && this.selectList.find(i => i.approvalStatus === APPROVAL_STATUS.REFUSE)) {
        this.$message.warning('所选成本包含未过审成本，请取消选择后再操作');
        return false;
      }
      if (status === HANDLE_ACTIVE.REFUSE_APPROVAL && this.selectList.find(i => i.approvalStatus === APPROVAL_STATUS.PASS)) {
        this.$message.warning('所选成本包含已通过成本，请取消选择后再操作');
        return false;
      }
      if (!this.costIds) {
        this.$emit('costApprovalhandle', { operateApprovalType: 'approval', isBatchAll: true, approvalStatus: status });
      } else {
        this.approvalRequest(status, this.costIds);
      }
    },
    async approvalRequest(status, ids) {
      try {
        const data = {
          isBatch: this.isBatch,
          status,
          ids: ids instanceof Array ? ids.join(',') : ids };
        this.rejectLoading = status === HANDLE_ACTIVE.REFUSE_APPROVAL;
        this.loading = status !== HANDLE_ACTIVE.REFUSE_APPROVAL;
        const result = await costApproval(data);
        const { code, message } = result;
        this.loading = false;
        this.rejectLoading = false;
        if (code === 501) {
          this.$message.error(message);
          return false;
        }
        this.dialogFormVisible = false;
        this.$emit('costApprovalhandle');
      } catch (error) {
        this.loading = false;
        this.rejectLoading = false;
        console.log(error);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-wrap{
  display: flex;
  justify-content: center;
  font-size: 14px;
}
.cost-approval-dialog {
  &::v-deep {
    .order-import-button .import-btn {
      width: 240px;
    }
    .small-common-dialog-size .el-dialog__body {
      padding-bottom: 16px !important;
    }
  }
}
.el-button--danger.is-plain{
  border-color: #F56C6C;
}
.el-button {
  font-size: 14px;
}
</style>
<style lang="scss">
.cost-approval-box {
  position: fixed;
  top: 50%;
  right: 0;
  left: 0;
  margin-top: 0 !important;
  width: 420px;
  transform: translateY(-50%);
  .el-dialog__body {
    padding: 0;
  }
  .el-message-box__title {
    padding-top: 10px;
  }
  .el-message-box__content {
    padding: 22px 0 27px;
  }
}
</style>
